<template>
  <div v-show="hasPerms(perms)">
     <el-table :data="tableData" 
        :header-cell-style="tableHeaderColor"
        ref="multipleTable"
        style="width: 100%" 
        :row-class-name="tableRowClassName"
        border
        size="small">
        <el-table-column prop="操作用户ID" label="操作用户ID" width="180" align="center"></el-table-column>
        <el-table-column prop="操作人" label="操作人" width="180" sortable align="center"></el-table-column>
        <el-table-column prop="操作时间" label="操作时间" align="center"></el-table-column>
        <el-table-column prop="备注" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
      title="选择商家"
      width="80%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
     <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row style="display:flex;">
            <el-form-item label="联系人名称" prop="lianxirenName">
                <el-input style="width:400px;" v-model="dataForm.联系人名称" auto-complete="off" type="text" placeholder="联系人名称"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="dataForm.性别" label="男">男</el-radio>
                <el-radio v-model="dataForm.性别" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="联系人职位名称">
                <el-input style="width:400px;" v-model="dataForm.联系人职位名称" auto-complete="off" type="text" placeholder="联系人职位名称"></el-input>
            </el-form-item>
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="手机号码" prop="phone">
                <el-input style="width:400px;" v-model="dataForm.手机号码" auto-complete="off" type="text" placeholder="手机号码"></el-input>
            </el-form-item>
            <el-form-item label="固定电话">
                <el-input style="width:400px;" v-model="dataForm.固定电话" auto-complete="off" type="text" placeholder="固定电话"></el-input>
            </el-form-item>
            <el-form-item label="传真">
                <el-input style="width:400px;" v-model="dataForm.传真" auto-complete="off" type="text" placeholder="传真"></el-input>
            </el-form-item>
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="QQ">
                <el-input style="width:400px;" v-model="dataForm.QQ" auto-complete="off" type="text" placeholder="QQ"></el-input>
            </el-form-item>
            <el-form-item label="微信">
                <el-input style="width:400px;" v-model="dataForm.微信" auto-complete="off" type="text" placeholder="微信"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱">
                <el-input style="width:400px;" v-model="dataForm.传真" auto-complete="off" type="text" placeholder="联系邮箱"></el-input>
            </el-form-item>
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="联系地址">
               <el-cascader v-model="value" style="width:400px;" :options="options" @change="addressBlur"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input style="width:400px;" v-model="dataForm.详细地址" auto-complete="off" type="textarea" placeholder="详细地址"></el-input>
            </el-form-item>
            <el-form-item label="主要联系人">
                <el-radio v-model="dataForm.主要联系人" label="是">是</el-radio>
                <el-radio v-model="dataForm.主要联系人" label="否">否</el-radio>
            </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button type="primary" @click="checkpaged">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
import citys from '../../../../../static/json/Paje/citys'

export default {
  name: 'logComponent',
  props: {
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    show: {  // 按钮是否展示
      type: Boolean,
      default: true
    },
    editDialogVisible:{
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
        value: [],
        options:citys,
        size:"small",
        tableData: [],
        dataForm:{
            联系人名称: '',
            性别: '男',
            联系人职位名称: '',
            手机号码: '',
            固定电话:"",
            传真:"",
            QQ:"",
            微信:"",
            联系邮箱:"",
            联系地址:"",
            详细地址:"",
            主要联系人:"是"
        },
        dataFormRules: {
            lianxirenName: [{ required: true, message: "请输入联系人名称", trigger: "blur" }],
        },
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms: function (perms) {  
      if(this.show == false){
        return this.show
      } 
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms)
    },
    //table的双色条纹
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
            return 'warning-row';
        } else if (rowIndex === 3) {
            return 'success-row';
        }
        return '';
    },
    //table的标签
    filterTag(value, row) {
        return row.tag === value;
    },
    //table的编辑和删除
    handleEdit(index, row) {
        console.log(index, row);
    },
    handleDelete(index, row) {
        console.log(index, row);
    },
    //修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
            return 'background-color:rgb(250,250,250);'
        }
    },
    addressBlur(e){
        console.log("=======================")
        console.log(e)
        console.log(this.value)
    },
    checkpaged(){
        this.editDialogVisible = false;
        this.$message({message: '操作成功', type: 'success'})
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
</style>